<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <el-time-picker size="default" disabled :placeholder="placeholder"></el-time-picker>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-time-picker
        v-model="_value"
        :format="format"
        :value-format="format"
        size="default"
        clearable
        :placeholder="placeholder"
      />
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  format: {
    type: String,
    default: "HH:mm:ss"
  },
  placeholder: {
    type: String,
    default: "请选择时间"
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    console.log("时间区间>>>>", val);
    emit("update:modelValue", val);
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-date-editor.el-input) {
  width: 100%;
}
</style>
